<template>
  <div class="bf-contactUs">
      <div class="contactUs">
        <h1>{{ $t("page.about.contact.title") }}</h1>
        <div class="content-box">
          <el-row>
              <el-col :span="8" v-for="list,index in getCurPData.item1" :key="index">
                  <img :src="list.imgUrl" alt="">
                  <h1>{{ list.title }}</h1>
                  <p>{{ list.desc }}</p>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-for="list,index in getCurPData.item2" :key="index">
                <h1>{{ list.title }}</h1>
                <p>{{ list.desc }}</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-for="list,index in getCurPData.item3" :key="index">
                <h1>{{ list.title }}</h1>
                <p>{{ list.desc }}</p>
            </el-col>
          </el-row>
          <el-row>
              <div id="mymap"></div>
          </el-row>
        </div>
      </div>
  </div>
</template>  
  
<script>
export default {
  mounted() {
    this.loadmap(); //加载地图和相关组件
  },
  computed:{
		getCurPData(){
			return this.$t("page.about.contact");
		}
	},
  methods: {
    loadmap() {
      // 地图设置
      var map = new AMap.Map("mymap", {
        center: [113.932777, 22.540639],
        zoom: 18,
        resizeEnable: true,
        icon: icon
      });
      var icon = new AMap.Icon({
        image: "http://vdata.amap.com/icons/b18/1/2.png", //24px*24px
        //icon可缺省，缺省时为默认的蓝色水滴图标，
        size: new AMap.Size(24, 24)
      });

      var marker = new AMap.Marker({
        map: map,
        position: [113.932777, 22.540639]
      });

      AMap.plugin("AMap.ToolBar", function() {
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
    }
  }
};
</script>  
<style>
#mymap {
  width: 930px;
  height: 500px;
}
.bf-contactUs {
  width: 100%;
}
.bf-contactUs .contactUs {
  width: 1000px;
  margin: 55px auto;
}
.bf-contactUs .contactUs .content-box {
  border: 1px solid #dee3e7;
  margin-top: 20px;
}
.bf-contactUs .contactUs .content-box .el-row:first-child {
  margin: 80px auto 45px auto;
  padding-bottom: 20px;
  width: 937px;
  border-bottom: 1px solid #dee3e7;
}
.bf-contactUs .contactUs .content-box .el-row:not(first-child) {
  width: 937px;
  margin: 40px auto 50px auto;
}
.bf-contactUs .contactUs h1 {
  margin-bottom: 21px;
}
.bf-contactUs .contactUs p {
  font-size: 16px;
  text-align: left;
  line-height: 40px;
}
.bf-contactUs .contactUs .content-box .el-row h1 {
  font-size: 16px;
  color: #3b3b3b;
  text-align: left;
}
.bf-contactUs .contactUs .content-box .el-row:first-child h1 {
  text-align: center;
  margin-top: 46px;
  margin-bottom: 36px;
}
.bf-contactUs .contactUs .content-box .el-row:first-child p {
  text-align: center;
}
</style> 